<template>
  <div class="modify">
    <div class="bank_top">
      <div class="bank_inline">
        <span class="bank_search"><el-input v-model="input" placeholder="搜索考试名称"></el-input></span>
        <span class="bank_search">
          <el-select v-model="question.examType" @change="propInt">
            <el-option v-for="(item, index) in examTypeList" :key="index" :label="item.name" :value="item.value">
            </el-option>
          </el-select>
        </span>
      </div>
      <span class="bank_btn"><el-button icon="el-icon-plus" size="small" type="primary" @click="add">发布</el-button></span>


      <div class="bank_selet" v-show="this.multipleSelection.length != 0">
        <span>
          <el-select v-model="value" :placeholder="cipplaceholder" @change="del">
            <el-option key="删除" label="删除" value="删除">
            </el-option> </el-select></span>
      </div>
    </div>
    <div class="bank_cent">
      <el-table :data="tableData" style="width: 100%" ref="multipleTable" border
        :header-cell-style="{ background: '#f2f3f4' }" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column align="center" label="考试模式" width="180">
          <template slot-scope="scope">
            <p v-if="scope.row.examType == 1">移动端模拟考试</p>
            <p v-if="scope.row.examType == 2">移动端正式考试</p>
            <p v-if="scope.row.examType == 3">电脑端模拟考试</p>
            <p v-if="scope.row.examType == 4">电脑端正式考试</p>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="title" label="考试名称" width="180">
        </el-table-column>
        <el-table-column align="center" label="考试类型" width="180">
          <template slot-scope="scope">
            <p v-if="scope.row.timeLimit">限时</p>
            <p v-else>不限时</p>
          </template>
        </el-table-column>

        <el-table-column align="center" label="考试时间">
          <template slot-scope="scope">
            <p v-if="scope.row.startTime && scope.row.endTime">
              {{ scope.row.startTime }}至{{ scope.row.endTime }}
            </p>
            <p v-else>无限时长</p>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="totalScore" label="考试总分">
        </el-table-column>
        <el-table-column align="center" prop="qualifyScore" label="及格线">
        </el-table-column>
        <el-table-column align="center" prop="state" label="状态">
          <template slot-scope="scope">
            <p v-if="scope.row.state == 0">考试中</p>
            <p v-if="scope.row.state == 1">未开始</p>
            <p v-if="scope.row.state == 2">已完成</p>
            <p v-if="scope.row.state == 3">已结束</p>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="address" label="操作" width="400">
          <template slot-scope="scope">
            <el-button type="success" size="small" icon="el-icon-edit" @click="edit(scope.row)">修改</el-button>
            <!-- <el-button
              type="warning"
              size="small"
              icon="el-icon-user-solid"
              @click="look(scope.row)"
              >考试详细</el-button
            > -->
            <el-button size="small" type="info" @click="mark(scope.row)">考试成绩下载</el-button>
            <el-button type="warning" size="small" icon="el-icon-user-solid" @click="message(scope.row)">发送短信</el-button>

          </template>
        </el-table-column>
      </el-table>
      <div class="pagina">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="question.currentPage" :page-sizes="[10, 20, 30, 10]" :page-size="question.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="发布试题" :visible.sync="dialogVisible" fullscreen :before-close="handleClose">
      <add v-if="isShow" @onShow="onShow" :modifyObj="modifyObj" />
    </el-dialog>

  </div>
</template>

<script>
import { examList, examDelete, examDetail, examaExprop, sendDeptSMS } from "@/api/bank";
import cache from '@/plugins/cache';
import add from "./add.vue"
import { deptTreeSelect } from "@/api/system/user";  
export default {
  components: {
    add
  },
  data() {
    return {
      options: [],
    
      place: '',
  
      modifyObj: {},
      isShow: false,
      input: "",
      checked: true,
      dialogVisible: false,
      typeList: [
        { label: "单选题", value: "1" },
        { label: "多选题", value: "2" },
        { label: "判断题", value: "3" },
      ],
      examTypeList: [
        { value: 1, name: "移动端模拟考试" },
        { value: 2, name: "移动端正式考试" },
        { value: 3, name: "电脑端模拟考试" },
        { value: 4, name: "电脑端正式考试" },
      ],
      types: "",
      total: null,
      ruleForm: {
        name: "",
        remarks: "",
      },
      rules: {
        name: [
          { required: true, message: "题库名称不能为空", trigger: "blur" },
        ],
      },
      tableData: [],
      multipleSelection: [],
      value: "",
      question: {
        pageSize: 5,
        currentPage: 1,
        resourceIds: [cache.session.getJSON('deptId'), 100],
        examType: null,
      },
      obj: {}
    };
  },
  computed: {
    cipplaceholder() {
      return this.multipleSelection.length
        ? `已选${this.multipleSelection.length}项`
        : "111";
    },
  },
  created() {
    this.getexamList();
  },
  methods: {

    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

    // 节点单击事件
    handleNodeClick(a, b) {
      if (b.checkedKeys.length != 0) {
        this.resourceIdsList = b.checkedKeys;
      }
    },

    message(v) {
      console.log(v);
      switch (v.examType) {
        case 1:
          this.place = "移动端模拟考试"
          break;
        case 2:
          this.place = "移动端正式考试"
          break;
        case 3:
          this.place = "电脑端模拟考试"
          break;
        case 4:
          this.place = "电脑端正式考试"
          break;

        default:
          break;
      }
      if(this.place!=''){
        sendDeptSMS({
        resourceIds: v.scope.split(','),
        startTime: v.startTime,
        endTime: v.endTime,
        content: v.title,
        place: this.place
      }).then(res => {
        console.log(res);
      })
      }

    
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },

 
    onShow(e) {
      if (e == 1) {
        this.dialogVisible = false;
        this.getexamList();
      } else {
        this.dialogVisible = true;
      }
    },
    mark(e) {
      examaExprop({ examId: e.examId }).then((response) => {
        console.log(response)
        const blob = new Blob([response]);
        const elink = document.createElement("a");
        var fileName = `${e.title}考试成绩.xls`;

        elink.download = fileName;
        elink.style.display = "none";
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink);
      });
    },
    handleSizeChange(val) {
      this.question.pageSize = value;
      // this.question.currentPage = 1;
      this.getexamList();
    },
    propInt() {
      this.getexamList();
    },
    handleCurrentChange(val) {
      this.question.currentPage = val;
      this.getexamList();
    },
    getexamList() {
      examList(this.question).then((res) => {
        if (res.success) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        } else {
          this.$message({
            message: "获取失败",
            type: "warning",
          });
        }
      });
    },
    edit(e) {

      examDetail({ id: e.examId }).then((res) => {
        Object.assign(this.modifyObj, res.data);
        this.dialogVisible = true;
        this.isShow = false;
        this.$nextTick(() => {
          this.isShow = true;
        })
      });
    },
    look(e) {
      this.$router.push(`/modify/look/${e.examId}`);
    },
    handleClose() {
      this.dialogVisible = false;
   
    },
    add() {
      this.modifyObj = {};
      this.dialogVisible = true;
      this.isShow = false;
      this.$nextTick(() => {
        this.isShow = true;
      })
    },
    del(e) {
      this.value = "";
      this.$confirm("确实要删除吗??", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let ids = [];
          this.multipleSelection.forEach((item) => {
            ids.push(item.examId);
          });
          examDelete({ ids }).then((res) => {
            console.log(res);
            if (res.success) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getexamList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.modify {
  width: 100%;

  background: #fff;
  padding: 10px 10px;
  overflow: auto;

  .bank_top {
    width: 100%;

    .bank_inline {
      width: 100%;

      .bank_search {
        width: 200px;
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 10px;
      }
    }
  }

  .bank_selet {
    span {
      width: 130px;
      display: inline-block;
      margin-top: 10px;
      margin-bottom: 10px;
    }
  }

  .bank_cent {
    width: 100%;
    margin-top: 10px;

    .pagina {
      margin-top: 50px;
    }
  }
}
</style>
